<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>basic-form</title>
    </head>
    <body>
        <form action="./payment_page" method="get">
            <!--提交时把数据以 GET 方式发送到 ./payment_page 这个地址。-->
            <!--这个URL是相对地址，意思是当前路径的子目录里的payment_page-->
        <h2>Register for the meetup</h2>
        <p>
            <fieldset>
                <!--<fielset>:定义一个表单字段集，用于将相关的表单元素分组-->
                <legend>Choose hotel room type:</legend>
                <!--<legend> 是配合 <fieldset> 使用的表单分组标题元素，用来给一组相关的表单控件添加说明文字，提升语义与可访问性。浏览器会把它作为该组控件的标题显示，通常嵌在 <fieldset> 边框上方。-->
                <!--<legend> 一般放在对应 <fieldset> 的第一个子元素位置。
每个 <fieldset> 通常只需要一个 <legend>。
有助于屏幕阅读器理解该组输入的含义，提升无障碍体验。-->
                <div>
                    <input type="radio" id="hotelChoice1" name="hotel" value="economy" checked/>
                    <label for="hotelChoice1">Economy(+$0)</label>
                    <!--<input type="radio" ... />: 定义一个单选按钮。
id="hotelChoice1": 该单选框的唯一标识。
name="hotel": 单选组名。相同 name 的单选框互斥，只能选一个。
value="economy": 表单提交时，该选项对应提交的值。
checked: 默认选中此项。
<label for="hotelChoice1">Economy(+50)</label>:
通过 for 关联到 id="hotelChoice1" 的单选框，点击文字可切换该单选框。
显示给用户的文案是 “Economy(+50)”。-->
                    
                    <input type="radio" id="hotelChoice2" name="hotel" value="suerior"/>
                    <lable for="hotelChoice2">Superior(+$50)</lable>

                    <input type="radio" id="hotelChoice3" name="hotel" value="penthouse" disabled/>
                    <!--disabled表示禁用，无法被选中-->
                    <label for="hotelChoice3">Penthouse</label>
                </div>
            </fieldset>
        </p>

        <!--复选框-->
        <p>
            <fieldset>
                <legend>Choose classes to attend:</legend>
                <div>
                    <input type="checkbox" id="yoga" name="yoga"/>
                    <label for="yoga">Yoga(+$10)</label>

                    <input type="checkbox" id="'coffee" name="coffee"/>
                    <label for="coffee">Coffee roasting(+$20)</label>

                    <input type="checkbox" id="balloon" name="balloon"/>
                    <label for="balloon">Balloon animal art(+$5)</label>
                </div>

            </fieldset>
        </p>

        <!--下拉选择框-->
        <p>
            <label for="transport">How are you getting here:</label>
            <!--关联到id为transport的空间，点击文字会聚焦/展开于此控件-->
            <select name="transport" id="transport">
                <!--一个下拉选择框的控件，id为transport-->
                <!--name="transport" 决定表单提交时的字段名为 transport-->
                <option value="">--Please choose an option--</option>
                <!--占一个选择为，value为空，提示用户必须选择有效位-->
                <option value="plane">Plane</option>
                <option value="bike">Bike</option>
                <option value="walk">Walk</option>
                <option value="bus">Bus</option>
                <option value="train">Train</option>
                <option value="jetpack">Jetpack</option>
                <!--value即表单提交时服务器收到的键值对，是name=value的格式，比如transport=bus-->
            </select>
        </p>
        <p>
            <label for="comments">Any other comments:</label>
            <textarea id="comments" name="comments" rows="5" cols="33"></textarea>
            <!--多行文本输入，用col和row来控制可见行列，name=‘comments’是提交总段名-->
        </p>
        <p>
            <button>Continue to payment</button>
            <!--在 <form> 内默认类型是 submit，点击会提交表单。
如需纯按钮不提交，应写 type="button-->
        </p>
        </form>

    </body>
</html>